<template>
    <div class="od-card" :class="type" @click="$emit('click', type)">
        <div class="mouse-catch"></div>
        <div class="container">
            <slot></slot>
        </div>
    </div>
</template>

<style lang="scss">
    // 在card上禁用鼠标事件，创建一个平行四边形透明子元素来接受鼠标事件，然后冒泡到card上
    .od-card {
        width: 567px;
        height: 400px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 580px 400px;
        margin: 0px -70px;
        position: relative;
        pointer-events: none;
    }

    .realtime {
        background-image: url("../../../static/images/od/realtime.png");
    }

    .bus {
        background-image: url("../../../static/images/od/bus.png");

        &:hover {
            cursor: pointer;

            h1 {
                color: #1cd2ff;
            }
        }
    }

    .taxi {
        background-image: url("../../../static/images/od/taxi.png");
    }

    .od {
        background-image: url("../../../static/images/od/od.png");

        &:hover {
            cursor: pointer;

            h1 {
                color: #1cd2ff;
            }
        }
    }

    .mouse-catch {
        width: 420px;
        height: 400px;
        position: absolute;
        left: 75px;
        transform: skewX(-10deg);
        pointer-events: auto;
    }

    .container {
        width: 340px;
        height: 400px;
        position: absolute;
        left: 115px;
        pointer-events: auto;
    }
</style>

<script>
    export default {
        name: 'od-card',
        props: {
            type: String
        }
    }
</script>


